<template>
  <div class="login">
    <div class="left-section">
      <div class="login-left-content">
        <h1 class="title-main">智慧教室</h1>
        <p class="title-sub">打造智能化教学环境，提升教学效率</p>
      </div>
    </div>
    <div class="right-section">
      <div class="login-container">
        <p class="welcome-text">欢迎使用智慧教室</p>
        <p class="login-text">用户登录</p>

        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
          <div class="el-input">
            <input
              v-model="loginForm.userName"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="账号"
            >
          </div>
          <div class="el-input">
            <input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter="handleLogin"
            >
          </div>
          <div class="remember-me">
            <input type="checkbox" id="remember" />
            <label for="remember">记住密码</label>
          </div>
          <!-- <button type="submit" class="login-button">登录</button> -->
          <el-button
              :loading="loading"
              size="large"
              type="primary"
              style="width:100%; background-color: #13227a; border-color: #13227a;"
              @click.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
        </el-button>
            <p class="login-tip">还没有账号？<router-link to="/register" class="register-link">立即注册</router-link></p>
        </el-form>
        <!-- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
          <el-form-item prop="username">
          </el-form-item>

          <el-form-item prop="password">
          </el-form-item>
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px; color: #13227a;" :style="{ color: '#13227a', '--el-checkbox-checked-color': '#13227a' }">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            
            <div style="float: right;" v-if="register">
              <p class="login-tip">还没有账号？<router-link to="/register" class="register-link">立即注册</router-link></p>
            </div>
          </el-form-item>
        </el-form> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from '@/utils/axios';

const router = useRouter();
const loading = ref(false);

const loginForm = reactive({
  userName: '',
  password: ''
});

const handleLogin = async () => {
  loading.value = true;
  try {
    const formData = new URLSearchParams();
    formData.append('userName', loginForm.userName);
    formData.append('password', loginForm.password);
    
    const response = await axios.post('/user/login', formData, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
    
    console.log('登录响应:', response.data);
    
    if (response.data.code === 0 && response.data.data) {
      const token = response.data.data;
      // 存储token
      localStorage.setItem('token', token);
      
      // 验证token是否正确存储
      const storedToken = localStorage.getItem('token');
      console.log('存储的token:', storedToken);
      
      if (storedToken) {
        ElMessage.success('登录成功');
        // 确保在token存储后再跳转
        setTimeout(() => {
          router.push('/teacher/manager');
        }, 100);
      } else {
        throw new Error('Token存储失败');
      }
    } else {
      throw new Error(response.data.message || '登录失败');
    }
  } catch (error) {
    console.error('登录错误:', error);
    ElMessage.error(error.message || '登录失败');
  } finally {
    loading.value = false;
  }
};

</script>

<style>
.login {
  display: flex;
  height: 100vh; /* 高度占据整个页面 */
  position: relative;
}
.left-section {
  flex: 1; /* 宽度平均分 */
  background: #13227a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-left-content {
  text-align: center;
  color: #ffffff;
}
.right-section {
  flex: 1; /* 宽度平均分 */
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: none;
}
.right-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('src/assets/images/rainbow.jpg') no-repeat center center;
  background-size: cover;
  z-index: 1;
  opacity: 0.2;
}
.login-container {
  z-index: 2;
  width: 50%; /* 宽度是右半部分宽度的一半 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  border-radius: 8px;
}
.title-main {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}
.title-sub {
  font-size: 18px;
}
.welcome-text {
  margin-bottom: 10px;
  text-align: left;
  color: #13227a;
  font-size: 18px;
}
.login-text {
  margin-bottom: 20px;
  text-align: left;
  color: black;
  font-weight: bold;
  font-size: 18px;
}
.login-form {
  width: 100%;
}
.el-input {
  margin-bottom: 10px;
  width: 100%;
}
.el-input input {
  width: 100%;
  height: 40px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px; /* 角变得更圆 */
}
.remember-me {
  margin-bottom: 20px;
  color: #13227a;
}
.login-button {
  width: 100%;
  height: 40px;
  background-color: #13227a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-link {
  color: #13227a;
  text-decoration: none;
}
</style>
